<?php defined('IN_ADMIN') or exit('Access Denied!');?>

<style>
#target{border:1px #CCC solid;padding:2px}

.jcrop-holder{direction:ltr;text-align:left;border:1px #aaa solid}
.jcrop-vline,.jcrop-hline{background:#FFF url(Jcrop.gif) top left repeat;font-size:0;position:absolute}
.jcrop-vline{height:100%;width:1px!important}
.jcrop-hline{height:1px!important;width:100%}
.jcrop-vline.right{right:0}
.jcrop-hline.bottom{bottom:0}
.jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px}
.jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%}
.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0}
.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px}
.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%}
.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%}
.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0}
.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0}
.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0}
.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px}
.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%}
.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px}
.jcrop-dragbar.ord-n{margin-top:-4px}
.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px}
.jcrop-dragbar.ord-e{margin-right:-4px;right:0}
.jcrop-dragbar.ord-w{margin-left:-4px}
.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#FFF;filter:Alpha(opacity=70)!important;opacity:.70!important}
.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-radius:3px;border-color:#FFF}
.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:Alpha(opacity=70)!important;opacity:.7!important}
.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF;border-radius:3px;border-color:#000}
.jcrop-holder img,img.jcrop-preview{max-width:none}
</style>

<form method="post" action="/admin/attach/tailor?width=<?=intval($width);?>&height=<?=intval($height);?>">
<div class="pad_10" id="tailor">
<table width="100%" cellspacing="0" class="table_form">
  <tr>
    <td>
      <label title="使用帮助：
1、粘贴网路图片地址，或者上传本地图片；
2、调剪裁框，可以在右边看到剪裁后的效果；
3、满意后，单击“确认剪裁”。">
      选择图片 <input type="text" size="50" class="input-text" id="picture" name="picture" value="<?=h($picture);?>" /></label>
      <input type="button" value="使用网络图片" id="imgfile" /> 或 <input type="button" value="上传本地图片" id="upfile" />
    </td>
  </tr>
<?php if($result){ ?>
  <tr>
    <td align="center">
        <img src="<?=UPLOAD_URL.$result;?>" rel="<?=$result;?>" id="result" alt="Result" />

        <br /><br />
        <input type="button" name="save" id="savefile" value="确认保存" />
        <span>|</span>
        <input type="button" name="back" id="initfile" value="返回重试" />
    </td>
  </tr>
<?php
    }else{
        $picture = empty($picture) ? STATIC_URL.'img/common/blank.gif' : $picture;
?>
  <tr>
    <td>
      <table width="100%">
      <tr>
        <td>
          <div style="width:700px;height:400px;overflow:auto;background:url(<?=STATIC_URL;?>img/common/transparent.gif);border:1px #ccc solid;">
            <img src="<?=h($picture);?>" id="target" alt="Target" />
          </div>
        </td>
        <td>
          <div style="width:<?=intval($width);?>px;height:<?=intval($height);?>px;overflow:hidden;border:1px solid #ccc;margin-left:10px;">
            <img src="<?=h($picture);?>" id="preview" alt="Preview" class="jcrop-preview" width="1000" />
          </div>
        </td>
      </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <label>X：<input type="text" size="5" id="x" name="x" class="input-text" readonly /></label>
      <label>Y：<input type="text" size="5" id="y" name="y" class="input-text" readonly /></label>
      <label>W：<input type="text" size="5" id="w" name="w" class="input-text" readonly /></label>
      <label>H：<input type="text" size="5" id="h" name="h" class="input-text" readonly /></label>

      <input type="submit" name="dosubmit" value="确认剪裁" />
    </td>
  </tr>
<?php } ?>
</table>
</div>
</form>
<script type="text/javaScript" language="JavaScript" src="<?=STATIC_URL;?>js/jquery.jcrop.min.js"></script>
<script type="text/javascript" language="javascript" src="<?=STATIC_URL;?>js/ajaxupload.min.js"></script>
<script type="text/javascript">
// Create variables (in this scope) to hold the API and image size
var jcrop_api, boundx, boundy;

$(document).ready(function(){

    var width  = <?=intval($width);?>;
    var height = <?=intval($height);?>;
    var picid  = <?=intval($picid);?>;

    function loadTailor(picture){
        window.location.href="/admin/attach/tailor?width=" +width+ "&height=" +height+ "&picture="
            + (picture?encodeURI(picture):'');
    }

    $("#savefile").click(function(){
        var picshow = $(window.top.frames[1].document).find("#picshow-" + picid);
        var picture = $(window.top.frames[1].document).find("#picture-" + picid);

        picshow.attr("src", $("#result").attr("src"));
        picture.val($("#result").attr("rel"));

        window.top.art.dialog({id:"tailor"}).close()
    });

    $("#initfile").click(function(){
        loadTailor($("#picture").val());
    });

    $("#imgfile").click(function(){
        if($("#picture").val() == "")
            alert('请粘贴网络图片地址');
        else
            loadTailor($("#picture").val());
    });

    //图片上传
    new AjaxUpload($("#upfile"), {
        action: '/admin/attach/upload/picture',
        name: 'picture',
        data: {
            'name'      : 'picture',
            'min_width' : width,
            'min_height': height,
            'is_tmpfile': 1,
            'dosubmit'  : 'yes',
        },
        autoSubmit: true,
        responseType: 'json',
        onSubmit : function(file, ext){
            this.disable();
        },
        onComplete: function(file, response){
            this.enable();
            if(response.error == ""){
                loadTailor('<?=UPLOAD_URL;?>' + response.file);
            }else if(response.error){
                alert(response.error);
            }else{
                alert("文件上传接口错误，请重试！" + response);
            }
        }
    });

    $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: (height ? width / height : 1)

    },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
    });


    function updatePreview(c) {
        if (parseInt(c.w) > 0)
        {
          var rx = width / c.w;
          var ry = height / c.h;

          $("#x").val(c.x);
          $("#y").val(c.y);
          $("#w").val(c.w);
          $("#h").val(c.h);

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
    };
});
</script>